<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
    <script>
        const oDiv = document.querySelector('div')
        const oPara = document.querySelector('p')
        // const oPhase = {
        //     1: '捕获阶段',
        //     2: '目标阶段',
        //     3: '冒泡阶段'
        // }

        // const callback = (event) => {
        //     console.log(`元素：${event.currentTarget.tagName}，传播阶段：${oPhase[event.eventPhase]}`)
        // }
        const callback = (event) => {
            console.log(`元素：${event.currentTarget.tagName}，传播阶段：${event.eventPhase}`)
        }
        oDiv.addEventListener('click',callback,true)
       // oPara.addEventListener('click',callback,true)
        oDiv.addEventListener('click',callback,false)
        oPara.addEventListener('click', callback, false)
    </script>
</body>
</html>